<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link href= "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">

</head>
<body>
<!--
// v0 by Vercel.
// https://v0.dev/t/QgYOOXIJgLR
-->

<div class="flex flex-col h-screen bg-gray-50 dark:bg-gray-900">
  <header class="bg-[#e0f2fe] dark:bg-gray-800 shadow-sm p-4 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="h-6 w-6 text-gray-500 dark:text-gray-400"
      >
        <path d="M17 18a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2"></path>
        <rect width="18" height="18" x="3" y="4" rx="2"></rect>
        <circle cx="12" cy="10" r="2"></circle>
        <line x1="8" x2="8" y1="2" y2="4"></line>
        <line x1="16" x2="16" y1="2" y2="4"></line>
      </svg>
      <h1 class="text-xl font-medium text-gray-900 dark:text-gray-50">心灵疗愈站</h1>
    </div>
    <div class="flex items-center space-x-2">
      <button
              class="justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 flex items-center space-x-2"
              type="button"
              id="radix-:r0:"
              aria-haspopup="menu"
              aria-expanded="false"
              data-state="closed"
      >

        <select id="role" name="role">
          <option value="father">父亲</option>
          <option value="mather">母亲</option>
          <option value="dog">旺财</option>
        </select>

      </button>
      <p class="bg-[#e0f2fe] text-gray-700 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 rounded-md">
        We're here to listen and provide comfort.
      </p>
    </div>
  </header>
  <div class="flex-1 overflow-auto p-4">
    <div class="max-w-md mx-auto space-y-4">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
        <p class="text-gray-700 dark:text-gray-300">
          Hello, how can I help you today? I'm here to listen and provide comfort.
        </p>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
        <div class="flex items-center space-x-2">
          <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
            <span class="flex h-full w-full items-center justify-center rounded-full bg-muted">U</span>
          </span>
          <p class="text-gray-700 dark:text-gray-300">I'm feeling a bit down today. Can we talk?</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
        <p class="text-gray-700 dark:text-gray-300">Of course, I'm here to listen. What's on your mind?</p>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 flex items-center space-x-2">
        <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
          <span class="flex h-full w-full items-center justify-center rounded-full bg-muted">U</span>
        </span>
        <p class="text-gray-700 dark:text-gray-300">
          I've been feeling a bit overwhelmed lately. Work has been stressful and I'm struggling to find time for
          myself.
        </p>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
        <p class="text-gray-700 dark:text-gray-300">
          I understand, that can be a lot to handle. Let's take a deep breath and talk through it. What are some
          things you can do to take care of yourself during this time?
        </p>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-800 shadow-t p-4 flex items-center space-x-2">
    <input
            class="flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 flex-1 bg-gray-100 dark:bg-gray-700 border-none focus:ring-0 focus:outline-none"
            placeholder="Type your message..."
            type="text"
    />
    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10">
      <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="h-5 w-5 text-gray-500 dark:text-gray-400"
      >
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
        <line x1="9" x2="9.01" y1="9" y2="9"></line>
        <line x1="15" x2="15.01" y1="9" y2="9"></line>
      </svg>
    </button>
    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10"></button>
  </div>
</div>
</body>
</html>